<template>
  <div class="index-box">
    <div class="content-head">
      <a-row align="middle">
        <a-col span="14">
          <a-button type="primary" icon="plus" @click="() => { $router.push({name:'data_community_operation',params:{id:'add'}}) }">添加小区</a-button>
        </a-col>
        <a-col span="10">
          <a-input-search placeholder="请输入小区名称" enterButton @search="onSearch" />
        </a-col>
      </a-row>
    </div>
    <div class="content-body">
      <s-table ref="table" size="default"  :columns="columns" rowKey="id"  :data="dataSource">
        <template slot="operation" slot-scope="text,record">
          <a-dropdown>
            <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
            <a-menu slot="overlay" @click="operation($event,record.id)">
              <a-menu-item key="1">编辑</a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
import {STable} from '@/components'
import { mapGetters } from 'vuex'
  export default {
    name: 'data_community_index',
    components: {
      STable
    },
    data() {
      return {
        columns:[
          {
            title:'小区编号',
            dataIndex:'id'
          },
          {
            title:'小区名称',
            dataIndex:'name'
          },
          {
            title: '所在地区',
            dataIndex:'area',
            scopedSlots:{customRender:'area'}
          },
          {
            title: '总房数',
            dataIndex:'allHouse',
          },
          {
            title: '交房数',
            dataIndex:'jfHouse',
          },
          {
            title: '未交房数',
            dataIndex:'wjfHouse',
          },
          {
            title: '公摊房数',
            dataIndex:'gtHouse',
          },
          {
            title: '总户数',
            dataIndex:'nums',
          },
          {
            title: '详细地址',
            dataIndex:'address'
          },
          {
            title: '负责人',
            dataIndex:'contact'
          },
          {
            title: '负责人电话',
            dataIndex:'phone'
          },
          {
            title: '联系人',
            dataIndex:'call_name'
          },
          {
            title: '联系人电话',
            dataIndex:'call_tel'
          },
          {
            title: '操作',
            dataIndex:'operation',
            scopedSlots:{customRender:'operation'}
          }
        ],
        // 查询参数
        queryParam: {},
        dataSource:parameter => {
          return this.getList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res
          })
        }
      }
    },
    methods:{
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 获取小区列表
      getList(param) {
        return new Promise((resolve,reject) => {
          this.axios({
            method:'get',
            url:'/community/getList',
            params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
          }).then(res => {
            if(res.code === 0){
              resolve(res.data)
            }else{
              this.$message.error(res.data.msg,2);
            }
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
            this.loading = false;
          })
        })
      },
      // 小区操作
      operation({ key },id) {
        if(key === '1') this.$router.push({name:'data_community_operation',params:{id}});
      },
      // 搜索
      onSearch(val) {
        this.queryParam['name'] = val;
        this.$refs.table.refresh(true);
      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
  }
</style>